<template>
  <a-modal
    v-bind="$attrs"
    :visible="visible"
    class="model-panel"
    :closable="false"
    :footer="null"
    :maskClosable="true"
    :style="panelStyle"
    :width="width"
  >
    <BouncedPanel :title="title" @close="close" :showClose="showClose" :align="align">
      <slot></slot>
      <div class="footer-buttons">
        <a-button class="model-button model-confirm"
type="primary"
:loading="confrimLoaing"
@click="handleOk"
          >确认</a-button
        >
        <a-button class="model-button model-cancel" @click="cancel"> 取消</a-button>
      </div>
    </BouncedPanel>
  </a-modal>
</template>

<script>
/**
 * @desc   模态框弹层
 * @auther 阳坤
 * @date 2022/10/22
 *
 **/
export default {
  name: 'ModelPanel'
}
</script>
<script setup>
/**
 * 有蒙层弹框
 *
 * @author 阳坤（1194636148@qq.com）
 * @date   时间：2022/11/20
 */
import { defineEmits, defineProps, shallowRef, watch, defineExpose } from 'vue'
import BouncedPanel from '../detail-panel'
const props = defineProps({
  // 弹框显示配置
  visible: {
    type: Boolean,
    default: false
  },
  // 面板标题
  title: {
    type: String,
    default: ''
  },
  // 标题对齐方式
  align: {
    type: String,
    default: 'center'
  },
  // 是否显示关闭按钮
  showClose: {
    type: Boolean,
    default: true
  },
  // 弹框位置
  panelStyle: {
    type: Object,
    default: () => ({
      top: '20%'
    })
  },
  width: {
    type: String,
    default: '3.9rem'
  }
})

// emit回调方法
const emit = defineEmits(['close', 'cancel', 'handleOk'])
const confrimLoaing = shallowRef(false)

watch(
  () => props.visible,
  value => (confrimLoaing.value = false)
)

function close() {
  emit('close')
}

function handleOk() {
  confrimLoaing.value = true
  emit('handleOk')
}

function cancel() {
  emit('cancel')
}

defineExpose({
  confrimLoaing
})
</script>

<style lang="less">
.model-panel.ant-modal {
  .ant-modal-content {
    background-color: transparent;
    box-shadow: none;

    .ant-modal-header,
    .ant-modal-footer {
      display: none;
    }
    .ant-modal-body {
      padding: 0;

      .mz-panel.light {
        box-shadow: none;
        border-radius: 0;
      }
    }

    .mz-panel-content {
      padding: 20px 25px 34px 25px;

      .title-name {
        font-size: 16px;
        letter-spacing: 1.5px;
      }
      .footer-buttons {
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        .model-button {
          width: 80px;
          height: 28px;
          border-radius: 4px;
          background: #ffffff;
          margin: 0 10px;
          padding: 0;
        }
        .model-button.model-confirm {
          border: 1px solid #377ee9;
          color: #266bf4;
        }
        .model-button.model-cancel {
          border: 1px solid #999999;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
